{extend name="../../admin/view/main"}

{block name='content'}
<div class="think-box-shadow portal-block-container notselect">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12">
            <h3 class="portal-block-title">实时报告</h3>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
                <div>新增派单数量</div>
                <div>{$todayRecordCount|default='0'}</div>
                <div>新增派单数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-user"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)">
                <div>今日完工数量</div>
                <div>{$todayCompleteCount|default='0'}</div>
                <div>今日完工数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-app"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-113deg,#c543d8,#925cc3)">
                <div>当日有效人力</div>
                <div>{$checkInUserCount|default='0'}</div>
                <div>当日有效人力</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-form"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
                <div>未回复工单数量</div>
                <div>{$notReplay30|default='0'}</div>
                <div>未完成喷漆，超过30分钟倒计时数据</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>
    </div>
</div>

<div class="think-box-shadow portal-block-container notselect">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12">
            <h3 class="portal-block-title">累计报告</h3>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
                <div>累计派单数量</div>
                <div>{$totalRecordCount|default='0'}</div>
                <div>累计派单数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-user"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)">
                <div>累计完工数量</div>
                <div>{$totalCompleteCount|default='0'}</div>
                <div>累计完工数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-app"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-113deg,#c543d8,#925cc3)">
                <div>累计待施工数量</div>
                <div>{$totalNotCompleteCount|default='0'}</div>
                <div>累计待施工数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-form"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
                <div>当月结单数量</div>
                <div>{$monthCompleteNum|default='0'}</div>
                <div>当月结单数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>
    </div>
</div>


<div class="think-box-shadow portal-block-container notselect">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm-12">
            <h3 class="portal-block-title">人力紧缺城市预警</h3>
        </div>
        <div class="layui-col-sm-12">
            <div style="display: flex; flex-wrap: wrap;">

                {foreach $earlyWarningCities as $city}
                    <button class="layui-btn layui-btn-danger layui-btn-lg margin-bottom-10">
                        <span>{$city}</span>
                    </button>
                {/foreach}

            </div>
        </div>
    </div>
</div>



<div class="layui-row layui-col-space15 margin-top-10">
    <div class="layui-col-xs12">
        <div class="think-box-shadow" style="border-radius: 0;">
            <div class="layui-tab layui-tab-card">
                <div class="layui-tab-content">
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">时间</label>
                        <label class="layui-input-inline">
                            <input class="layui-input" id="date" data-date-input name="date" placeholder="请选择时间" value="{:input('date', $yesterday)}">
                        </label>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <button class="layui-btn layui-btn-primary" id="search"><i class="layui-icon">&#xe615;</i> 查 询</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="think-box-shadow">
            <div id="main" style="width:100%;height:600px"></div>
        </div>
    </div>
</div>

<script>

    window.form.render();
    let btn = $('#search')
    btn.click(() => {
        getMain()
    })

    let getMain = function () {
        let date = $('#date').val()
        $.ajax({
            type: "post",
            url: "{:url('total.portal/cities')}",
            data: {
                date: date,
            },
            dataType: "json",
            success: function (res) {
                var cities = res.data.map(function (item) {
                    return item['城市'];
                });
                var groupEnergies = res.data.map(function (item) {
                    return item['去化能力'];
                });
                var recordCounts = res.data.map(function (item) {
                    return item['派单数量'];
                });
                var completeCounts = res.data.map(function (item) {
                    return item['完工数量'];
                });
                var completeTodayCounts = res.data.map(function (item) {
                    return item['当日派单完工数量'];
                });


                require(['echarts'], function (echarts) {
                    (function (charts) {
                        window.addEventListener("resize", function () {
                            charts.resize()
                        });
                        charts.setOption({
                            title: [{left: 'right', text: '城市完工统计'}],
                            tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'shadow'}},
                            grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
                            legend: {
                                data: ['去化能力', '派单数量', '完工数量', '当日派单完工数量']
                              },
                            xAxis: [{
                                type: 'category',
                                data: cities,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '去化能力',
                                    type: 'bar',
                                    barWidth: '15%',
                                    data: groupEnergies
                                },
                                {
                                    name: '派单数量',
                                    type: 'bar',
                                    barWidth: '15%',
                                    data: recordCounts
                                },
                                {
                                    name: '完工数量',
                                    type: 'bar',
                                    barWidth: '15%',
                                    data: completeCounts
                                },
                                {
                                    name: '当日派单完工数量',
                                    type: 'bar',
                                    barWidth: '15%',
                                    data: completeTodayCounts
                                }
                            ]
                        });
                    })(echarts.init(document.getElementById('main')));
                })
            }
        })


    }

    getMain()
</script>

{/block}
